import React, { Fragment } from 'react';
import { Col, Row } from 'antd';
import { connect } from 'dva';
import { Link } from 'umi';
import { Card, Tooltip, Icon, Space, Divider, Modal, Form, Button } from 'antd';
import { UpOutlined, DownOutlined, EditOutlined, PlusOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';
import { deepCopyObj, getUuid } from '../../utils/utils';

import InvoicesInfo from './InvoicesInfo';
import InvoiceDetail from './invoiceDetail';
import AdvancedDrawer from '@/components/AdvancedDrawer';
import ToolBarGroup from '../../components/ToolBarGroup';
import { INVOICE_DETAIL_STATUS } from '../../utils/Enum';

@connect(({ basicDataModel }) => ({
  basicDataModel,
}))

class Demo1 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedRows: [],
      drawerVisible: false,
      drawertitle: '发票详情',
      invoiceDetailStatus: INVOICE_DETAIL_STATUS.VIEW,
      records: [
        {
          name: "Santa Monica",
          number: 1995,
          amount: "$10,800",
          due: "12/05/1995",
          uuid: getUuid()
        },
        {
          name: "Stankonia",
          number: 2000,
          amount: "$8,000",
          due: "10/31/2000",
          uuid: getUuid()

        },
        {
          name: "Ocean Avenue",
          number: 2003,
          amount: "$9,500",
          due: "07/22/2003",
          uuid: getUuid()

        },
        {
          name: "Tubthumper",
          number: 1997,
          amount: "$14,000",
          due: "09/01/1997",
          uuid: getUuid()

        },
        {
          name: "Wide Open Spaces",
          number: 1998,
          amount: "$4,600",
          due: "01/27/1998",
          uuid: getUuid()

        },
        {
          name: "Monica",
          number: 1995,
          amount: "$10,800",
          due: "12/05/1995",
          uuid: getUuid()
        },
      ],
      pagination: {
        pageNum: 1,
        pageSize: 10,
      },
    }
  }

  // componentWillMount = () => {
  //   console.log('我是componentWillMount,挂载前调用，初始化渲染时调用');
  // }
  // componentWillUpdate = () => {
  //   console.log('我是componentWillUpdate,组件更新时调用');
  // }

  static getDerivedStateFromProps() {
    console.log("我是getDerivedStateFromProps，组件初始化和更新时调用");
    return null;
  }
  componentDidMount() {
    console.log('我是componentDidMount，初始化渲染时调用（挂载后调用）');
  }
  shouldComponentUpdate() {
    console.log("我是shouldComponentUpdate，组件更新时调用，在此可拦截更新");
    return true;
  }
  getSnapshotBeforeUpdate() {
    console.log("我是getSnapshotBeforeUpdate，组件更新时调用");
    return null;
  }

  componentDidUpdate() {
    console.log("我是componentDidUpdate，组件更新后调用");
  }
  componentWillUnmount = () => {
    console.log('我是componentWillUnmount，组件卸载时调用');
  }

  // componentWillReceiveProps = () => {
  //   console.log('我是componentWillReceiveProps,父组件状态更新触发');
  // }
  // handleEdit = (record) => {
  //   const newRecords = [...this.state.records];
  //   const { uuid } = record;
  //   this.setState({
  //     records: newRecords.map((item) => uuid === item.uuid ? { ...item, name: 'Merry' } : item)
  //   })
  // }
  handleUpOutlined = (record) => {
    const { records } = this.state;
    let newRecords = [...this.state.records];
    for (let index = 0; index < records.length; index++) {
      let item = records[index];
      if (item.uuid === record.uuid && index > 0) {
        [newRecords[index], newRecords[index - 1]] = [newRecords[index - 1], newRecords[index]];
        break;
      }
    }
    this.setState({
      records: newRecords
    });
  }
  handleDownOutlined = (record) => {
    const { records } = this.state;
    let newRecords = [...this.state.records];
    for (let index = 0; index < records.length; index++) {
      let item = records[index];
      if (item.uuid === record.uuid && index < records.length - 1) {
        [newRecords[index], newRecords[index + 1]] = [newRecords[index + 1], newRecords[index]];
        break;
      }
    }
    this.setState({
      records: newRecords
    });
  }
  handleEdit = (record) => {
    this.setState({
      selectedRows: record,
      drawerVisible: true,
      drawertitle: '发票信息修改',
      invoiceDetailStatus: INVOICE_DETAIL_STATUS.EDIT,
    })
  };
  handleInfo = (record) => {
    this.setState({
      selectedRows: record,
      drawerVisible: true,
      drawertitle: '发票详细信息',
      invoiceDetailStatus: INVOICE_DETAIL_STATUS.VIEW,
    });
  }
  handleFastAdd = (record) => {
    let newRecords = [...this.state.records];
    const newRecord = deepCopyObj(record);
    console.log(newRecord);
    newRecords.push(newRecord);
    this.setState({
      records: newRecords
    })
  }
  handleDelete = (record) => {
    const { uuid } = record;
    const { records } = this.state;
    let newRecords = [];
    records.map((item) => {
      item.uuid === uuid ? "" : newRecords.push(item);
    });
    this.setState({
      records: newRecords
    })
  }
  handleAddInvoice = () => {
    this.setState({
      drawerVisible: true,
      drawertitle: '新增发票记录',
      invoiceDetailStatus: INVOICE_DETAIL_STATUS.ADD,
    });
  }
  handleAddInvoiceRecord = () => {

  }
  createAction = (record) => {
    return (
      <Fragment>
        <Tooltip title="上移">
          <a
            onClick={() => { this.handleUpOutlined(record) }}
            // disabled
          >
            <UpOutlined />
          </a>
        </Tooltip>
        <Divider type="vertical" />
        <Tooltip title="下移">
          <a onClick={() => { this.handleDownOutlined(record) }} >
            <DownOutlined />
            </a>
        </Tooltip>
        <Divider type="vertical" />
        <Tooltip title="编辑">
          <a onClick={() => { this.handleEdit(record) }} >
            <EditOutlined />
          </a>
        </Tooltip>
        <Divider type="vertical" />
        <Tooltip title="详情">
          <a onClick={() => { this.handleInfo(record) }} >
            <EyeOutlined />
          </a>
        </Tooltip>
        <Divider type="vertical" />
        <Tooltip title="快速增加">
          <a onClick={() => { this.handleFastAdd(record) }}>
            <PlusOutlined /></a>
        </Tooltip>
        <Divider type="vertical" />
        <Tooltip title="删除">
          <a>
            <DeleteOutlined onClick={() => { this.handleDelete(record) }} />
          </a>
        </Tooltip>
      </Fragment>
    )
  }
  closeDrawer = () => {
    const { form } = this.props;
    // form.resetFields();
    this.setState({
      drawerVisible: false,
    })
  };
  handleStandardTableChange = () => {

  }
  render() {
    console.log("我是render");
    const {
      records = [], pagination = {}, selectedRows = [],
      invoiceDetailStatus = '', drawertitle = '',
      drawerVisible = false,
    } = this.state;
    const data = {
      list: records,
      pagination
    };
    const columns = [
      {
        title: 'uuid',
        key: 'uuid',
        dataIndex: 'uuid',
        width: '20%',
        align: 'center',
      },
      {
        title: '序号',
        key: 'index',
        dataIndex: 'index',
        width: '10%',
        align: 'center',
        render: (text, record, index) => <span>{index + 1}</span>
      },
      {
        title: '姓名',
        key: 'name',
        dataIndex: 'name',
        width: '10%',
      }, {
        title: '数量',
        key: 'number',
        dataIndex: 'number',
        width: '10%',
      },
      {
        title: '总价',
        key: 'amount',
        dataIndex: 'amount',
        width: '10%',
      }, {
        title: '发票日期',
        key: 'due',
        dataIndex: 'due',
        width: '10%',
      }, {
        title: 'Action',
        key: 'action',
        align: 'center',
        width: '15%',
        render: (text, record, index) => (
          <div>
            {this.createAction(record)}
          </div>
        )
      },
    ];

    const contentOptions = {
      onClose: this.closeDrawer,
      // updataFunction: this.updateMatch,
      addFunction: this.handleAddInvoiceRecord,
      invoiceDetailStatus,
    };
    const drawerOption = {
      drawertitle,
      drawerVisible,
      drawerContent: <InvoiceDetail data={selectedRows} {...contentOptions} />,
      onClose: this.closeDrawer
    };
    const btnList = {
      primaryBtn: [
        {
          func: this.importExcelUsersInfo,
          param: [],
          key: 'EXCEL_IMPORT_USERS_INFO'
        },
        {
          func: this.handleAddInvoice,
          param: [],
          key: 'ADD'
        }, {
          func: '',
          param: [],
          key: 'DIVIDER_VERTICAL',
        },]
    };
    return (
      <Fragment>
        <>
          <ToolBarGroup btnOptions={btnList} />
          <InvoicesInfo
            selectedRows={selectedRows}
            data={data}
            columns={columns}
            onChange={this.handleStandardTableChange}
          />
          <AdvancedDrawer {...drawerOption} />
        </>
      </Fragment>
    );
  }
}

export default Demo1;
